import '../public/index'
import url from '../data/url'
import request from '../data/request'
import {tableConfig, header} from '../data/config'
import store from 'store'

const base            = url.base,
      getDevLibList   = request.getDevLibList,
      getProvinceList = request.getProvinceList,
      getCityList     = request.getCityList,
      getBuildLibPage = request.getBuildLibPage;

let table,
    storeData

// 初始化表格
table = $('#table').bootstrapTable($.extend({}, tableConfig, {
  url: base + getBuildLibPage,
  queryParams: function (params) {
    return $.extend({
        currentPage: params.pageNumber,
        pageSize: params.pageSize
      },
      $('#searchForm').serializeObject())
  },
  columns: [
    {
      field: 'enterInfo.id',
      title: 'ID',
      valign: 'middle'
    }, {
      field: 'buildingInfo.openUp',
      title: '是否运营(对内)',
      valign: 'middle',
      formatter: (index, row) => {
        switch (index) {
          case '':
            return '未知';
            break;
          case 'open':
            return '运营';
            break;
          case 'close':
            return '不运营';
            break;
        }
      }
    }, {
      field: 'buildingInfo.propertyName',
      title: '楼盘名称(对内)',
      valign: 'middle'
    }, {
      field: 'buildingInfo.reserveName',
      title: '楼盘名称(对外)',
      valign: 'middle'
    }, {
      field: 'buildingInfo.developerName',
      title: '开发商名称(对内)',
      valign: 'middle'
    }, {
      field: 'enterInfo.reserveName',
      title: '开发商名称(对外)',
      valign: 'middle'
    }, {
      field: 'buildingInfo.provinceStr',
      title: '省',
      valign: 'middle'
    }, {
      field: 'buildingInfo.cityStr',
      title: '市',
      valign: 'middle'
    }, {
      field: 'buildingInfo.areaStr',
      title: '区',
      valign: 'middle'
    }, {
      field: 'action',
      valign: 'middle',
      align: 'center',
      title: '操作',
      formatter: function (index, row) {

        return `<div class="btn-group">
                  <button type="button" data-id="${ row.buildingInfo.id }" class="btn btn-default btn-detail">详情</button>
                  <button type="button" data-id="${ row.buildingInfo.id }" class="btn btn-default btn-modify">修改</button>
                </div>`
      }
    }]
}));

// 点击列表的时候传递数据到全局变量
table.on('click-row.bs.table', (e, data, el) => {
  storeData = data
});

// 初始化对内开发商
getDev();
// 初始化省份
getProvince();
// 级联城市
$('#provinceSearch').on('change', function () {
  let id = $(this).val();

  if (id === '') {
    $('#citySearch').html('<option value="">请选择</option>');
    $('#areaSearch').html('<option value="">请选择</option>');

    return;
  }

  getLinkage(id, 'citySearch')
});
// 级联区
$('#citySearch').on('change', function () {
  let id = $(this).val();

  if (!id) {
    $('#areaSearch').html('<option value="">请选择</option>');

    return;
  }

  getLinkage(id, 'areaSearch')
});

function getDev() {
  $.ajax({
    headers: header,
    url: base + getDevLibList
  })
    .done(function (res) {
      console.log(res);

      if (res.code === 0) {
        let $dom   = $('#dIdSearch'),
            result = '<option value="">请选择</option>',
            i      = 0,
            data   = res.object,
            len    = data.length;

        for (; i < len; i++) {
          result += `<option value="${data[i].enterInfo.id}">${data[i].enterInfo.enterpriseName}</option>`
        }

        $dom.html(result);

        $dom.selectize();
      }
    })
    .fail(function (res) {
      console.log(res);
      console.log('fail')
    })
    .always(function () {
      console.log('complete')
    })
}

function getProvince() {
  $.ajax({
    headers: header,
    url: base + getProvinceList
  })
    .done(function (res) {
      console.log(res);

      if (res.code === 0) {
        let $dom   = $('#provinceSearch'),
            result = '<option value="">请选择</option>',
            i      = 0,
            data   = res.object,
            len    = data.length;

        for (; i < len; i++) {
          result += `<option value="${data[i].id}">${data[i].name}</option>`
        }

        $dom.html(result);
      }
    })
    .fail(function (res) {
      console.log(res);
      console.log('fail')
    })
    .always(function () {
      console.log('complete')
    })
}

function getLinkage(id, dom) {
  $.ajax({
    headers: header,
    url: base + getCityList,
    data: {provinceId: id || 1}
  })
    .done(function (res) {
      console.log(res);

      if (res.code === 0) {

        let $dom   = $(`#${dom}`),
            result = '<option value="">请选择</option>',
            i      = 0,
            data   = res.object,
            len    = data.length;

        for (; i < len; i++) {
          result += `<option value="${data[i].id}">${data[i].name}</option>`
        }

        $dom.html(result);

      }
    })
    .fail(function (res) {
      console.log(res);
      console.log('fail')
    })
    .always(function () {
      console.log('complete')
    })
}

// 搜索
$('#search-btn').on('click', (e) => {
  e.preventDefault();

  table.bootstrapTable('refresh', {
    query: $.extend({
      currentPage: 1,
    }, $('#searchForm').serializeObject())
  })
});

//跳转至修改页
$(document).on('click', '#table .btn-modify', (e) => {
  e.preventDefault();

  console.log('详情');
  store.set('storeData', storeData);

  let id               = $(e.target).attr('data-id');
  window.location.href = `./modify.html?id=${id}`
});

//跳转至详情页
$(document).on('click', '#table .btn-detail', (e) => {
  e.preventDefault();

  console.log('详情');
  store.set('storeData', storeData);

  let id               = $(e.target).attr('data-id');
  window.location.href = `./detail.html?id=${id}`
});